import React, { Component } from 'react'
import * as handTrack from 'handtrackjs';

const modelParams = {
    flipHorizontal: true,   // flip e.g for video
    maxNumBoxes: 2,         // maximum number of boxes to detect
    iouThreshold: 0.5,      // ioU threshold for non-max suppression
    scoreThreshold: 0.6,    // confidence threshold for predictions.
}

export class App extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const img = document.getElementById('img');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    // Load the model.
    handTrack.load(modelParams).then(model => {
      // detect objects in the image.
      console.log("model loaded")
      model.detect(img).then(predictions => {
        // model.renderPredictions(predictions, canvas, context, img);
        console.log('Predictions: ', predictions);
        const array = predictions[0].bbox
        context.drawImage(img, array[0], array[1], array[2], array[3], 0, 0, array[2], array[3]);
      });
    });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <canvas id="canvas" className="border"></canvas>
          </div>
          <aside className="col-md-6 p-0">
            <img id="img" src="1.jpg" alt="hand" />
          </aside>
        </div>
        <div className="row">
        </div>
      </div>

    );
  }
}

export default App;
